<template>
	<n-modal class="my-chart-data-request" :onEsc="() => emit('update:show', false)" v-bind="$attrs">
		<n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 900px; height: 650px">
			<template #header></template>
			<template #header-extra> </template>
			<n-scrollbar style="max-height: 525px">
				<request-target-config :target-data-request="targetData?.orgConfig?.request"></request-target-config>
			</n-scrollbar>
			<!-- 底部 -->
			<template #action>
				<n-space justify="space-between">
					<div v-if="targetData">
						<n-text>「 {{ targetData.title }} 」</n-text>
						<n-text>— </n-text>
						<n-tag type="primary" :bordered="false" style="border-radius: 5px">
							{{ requestContentTypeObj[requestContentType] }}
						</n-tag>
					</div>
					<div class="flex-center">
						<div style="width: 90px" class="flex-center">
							名称：
							<n-tooltip trigger="hover">
								<template #trigger>
									<n-icon size="18" :depth="3">
										<HelpCircleOutline />
									</n-icon>
								</template>
								填写名称，则保存为公共接口
							</n-tooltip>
						</div>
						<n-input
							v-model:value="targetData.orgConfig.request.dataPondName"
							type="text"
							clearable
							:minlength="1"
							:maxlength="16"
							placeholder="请输入名称"
						/>
					</div>
					<n-button type="primary" @click="closeAndSendHandle"> {{ saveBtnText || '保存 & 发送请求' }}</n-button>
				</n-space>
			</template>
		</n-card>
	</n-modal>
</template>

<script setup>
import RequestTargetConfig from './components/RequestTargetConfig/index.vue';

const props = defineProps({
		targetData: Object,
		saveBtnText: String || null
	}),
	emit = defineEmits(['update:show', 'sendHandle']);

// 解构基础配置
const { requestContentType } = ref(props.targetData?.orgConfig?.request),
	requestContentTypeObj = {
		0: '普通请求',
		1: 'SQL 请求'
	};

function closeAndSendHandle() {
	emit('update:show', false);
	emit('sendHandle');
}
</script>

<style lang="scss" scoped>
@include b('chart-data-request') {
	&.n-card.n-modal,
	.n-card {
		@extend .my-background-filter;
		backdrop-filter: blur(20px);
		background-color: rgba(35, 35, 36, 0.7);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	}
	.n-card-shallow {
		background-color: rgba(0, 0, 0, 0) !important;
	}
	// :deep() {
	& > .n-card__content {
		padding-right: 0;
	}
	.n-card__content {
		padding-bottom: 5px;
	}
	// }
}
</style>
